<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
         text-align: center;
        /*border: 1px solid gold; */
        color: rgb(78, 117, 181);
        border: 1px solid rgb(0, 0, 131);
        background-color: rgb(255, 255, 255);
      }
      td {
        width: 70px;
        height: 50px;
        color: rgb(78, 117, 181);
        border: 1px solid rgb(0, 0, 131);
        background-color: rgb(255, 255, 255);
      }
      input{
        width: 310px;
        height: 50px;
        border: none;
        outline: none;
        color: rgb(78, 117, 181);
        text-align: center;
        font-size: 45px;
      }
      button{
        font-size: 40px;
        width: 100px;
        height: 50px;
        color: rgb(78, 117, 181);
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td tyep="text">第一个数</td>
        <td colspan="3" ><input type="text"class="inp1" /></td>
      </tr>
      <tr>
        <td>第二个数</td>
        <td colspan="3" ><input type="text" class="inp2"/></tr>
      </tr>
      <tr>
        <td><button class="btn1">+</button></td>
        <td><button class="btn2">-</button></td>
        <td><button class="btn3">*</button></td>
        <td><button class="btn4">/</button></td>
      </tr>
      <tr><td>运算结果</td>
        <td colspan="3"><input type="text" class="inp3" /></td>
      </tr>
    </table>
    <script>
      let inp1 = document.querySelector(".inp1");
      let inp2 = document.querySelector(".inp2");
      let inp3 = document.querySelector(".inp3");
      let btn1 = document.querySelector(".btn1");
      let btn2 = document.querySelector(".btn2");
      let btn3 = document.querySelector(".btn3");
      let btn4 = document.querySelector(".btn4");
      btn1.onclick = function () {
        if(inp1.value===""||inp2.value===""){
            alert('内容为空')
        }
        else{
        inp3.value = inp1.value * 1 + inp2.value*1;
        }
      };
      btn2.onclick = function () {
        if(inp1.value===""||inp2.value===""){
            alert('内容为空')
        }
        else{
        inp3.value = inp1.value * 1 - inp2.value*1;
        }
      };
      btn3.onclick = function () {
        if(inp1.value===""||inp2.value===""){
            alert('内容为空')
        }
        else{
        inp3.value = inp1.value * 1 * inp2.value*1;
        }
      };
      btn4.onclick = function () {
        if(inp1.value===""&&inp2.value===""){
            alert('内容为空')
        }
        else{
        inp3.value = inp1.value * 1 / inp2.value*1;
        }
      };
    </script>
  </body>
</html>
